PIWC Gives

Overview

PIWC Gives is a web platform designed to simplify and centralize all the different ways members of PIWC (Pentecost International Worship Center) Philadelphia can give offerings, tithes, and donations. The goal was to create a clean and trustworthy online experience that makes church giving more accessible while highlighting transparency and impact. The idea is to make it a QR code for easy and convenient access to the web platform

Problem Statement

Members of PIWC Philly often give offerings through different channels (cash, Cash App, Zelle, etc.), but the church lacked a single hub that clearly presented these options. This caused confusion, inconsistent giving habits, and made it harder for new members or online viewers to know how to give.

Key challenges:

• Fragmented giving options with no central guide.
• Lack of mobile-friendly access.
• Limited information on all the different ways of giving.

Research and Insight

• User Interviews: Conversations with church members revealed that many preferred different methods (Cash App for speed, Zelle for direct transfer, Titly for international giving)
• Competitive Analysis: Looked at giving pages from other churches and nonprofits — common patterns included donation buttons, QR codes, and recurring giving options.
• User Needs: Clear instructions, reassurance of security, multiple payment options, and mobile-friendly navigation.

Design and Development

Visual Design

For colors, i used Warm gold + deep navy to reflect trust, generosity, and spirituality. For typography, I chose Segoe UI san-serif font for readability and for the icons, i used simple and recognizable logos.

For the wireframes, I designed a simple landing page with a bold "Ways to Give." The layout was arranged in a way that wasn't distracting and easy to navigate through without scrolling to far down

Development

Once the design direction was decided, the focus shifted to building a functional, scalable, and user-friendly platform.

Setup & Frameworks: The site was built using HTML and CSS and all code was managed through GitHub, allowing for version tracking. The site was deployed on Vercel to ensure updates were live quickly.

HTML: I made a clear semantic structure and added logos and CTA buttons. Each giving method was represented as a card component.

CSS: Considering this as a mobile-first approach, i relied on flexbox and CSS grid for layout. I made custom variables for consistency and added media queries for responsiveness for both mobile and larger screens.

Testing & QA: After the site was developed, I did a browser testing across Chrome, Safari, and Firefox and also made sure the QR code was functional. I also did user testing with a small group of church members to confirm clarity of instructions.

Results

• Simplified giving process for members both in-person and online.
• Increased clarity and accessibility for new visitors.
• Positive feedback from church leadership and members appreciating the central hub.
• Early testing showed shorter giving time (from ~3 minutes to under 1 minute).